Visualizations

All Fatal Encounters

Filter the bar chart and map below.

import {us} from "@observablehq/us-geographic-data"
countiesFile = FileAttachment("ca_counties_geoverview.json").json()
counties = topojson.feature(countiesFile, countiesFile.objects.counties)
states = topojson.feature(us, us.objects.states)

ca_only_tidy = transpose(fe_data).map(p => ({
                                              'name': p.Name,  
                                              'Latitude': p['Latitude'],
                                              'Longitude': p['Longitude'],
                                              'Year': new Date(p[' Date of injury resulting in death (month/day/year)']).getFullYear(), 
                                              'Number of Fatal Encounters': 1, 
                                              'race': p['Race with imputations'], 
                                              'lea': p['Agency or agencies involved']}));

viewof fe_ca_search = Inputs.search(ca_only_tidy, 
{placeholder: "Enter a year, race, or police department name", 
width: 900,
})

Plot.plot({
  width: 1000,
  height: 600,
  x: {tickFormat: ""},
  y: {tickSpacing: 50},
  color: {legend: true},
  marks: [
  Plot.barY(fe_ca_search, {x: 'Year', y: 'Number of Fatal Encounters', fill: 'race', sort: 'race'}),
  ]
})

Plot.plot({
  width: 688,
  height: 688,
  projection: ({width, height}) => d3
              .geoMercator()
              .center([-119, 37.4])
              .scale((1 << 18) / (28 * Math.PI))
              .translate([320, 320]),
  marks: [
    Plot.geo(counties, { strokeOpacity: 0.8 }),
    Plot.geo(states, { strokeOpacity: 0.3 }),
    Plot.dot(fe_ca_search, {
     x: "Longitude",
     y: "Latitude",
    //  r: "Total_MW",
     fill: "yellow",
     fillOpacity: 0.6,
     stroke: "orange",
     title: (d) => `Name: ${d.name}\nYear: ${d.Year}\nLaw Enforcement Agency Involved: ${d.lea}`,
    //  href: (d) => d.properties['Agency or agencies involved'],
     target: "_blank" 
   })
  ]
})

Wikidata Fatal Encounters

viewof gender = Inputs.checkbox(
  ["Female", "Male", "Transgender", "Trans Woman"],
  {
    "label": "Gender",
    "value": ["Female", "Male", "Transgender", "Trans Woman"],
  }
)

viewof race = Inputs.checkbox(
  ["African American", "Latine", "European-American/White", "Asian/Pacific Islander", "Native American/Alaskan", "Race Unspecified"],
  {
    "label": "Race/Ethnicity",
    "value": ["African American"],
  }
)

// a function that will return the dataset filtered by whether the PrimSource property is in the list of energy_type values.
filtered = transpose(combineDf).filter(function(person) {
  return gender.indexOf(person.sexOrGenderLabel) >= 0 && race.indexOf(person.ethnicGroupLabel) >= 0
})

// create a function that returns a consistent color for an energy source

colors = function(source) {
  return {
    "coal": "darkgray",
    "male": "orange",
    "female": "green",
    "trans": "yellow",
    "wind": "palegreen"
  }[source]
}

// now map using the filtered and colors functions:
Plot.plot({
  width: 688,
  height: 688,
  projection: ({width, height}) => d3
              .geoMercator()
              .center([-119, 37.4])
              .scale((1 << 18) / (28 * Math.PI))
              .translate([320, 320]),
  marks: [
    Plot.geo(counties, { strokeOpacity: 0.8 }),
    Plot.geo(states, { strokeOpacity: 0.3 }),
    Plot.dot(filtered, {
     x: "Longitude",
     y: "Latitude",
    //  r: "Total_MW",
     fill: "yellow",
     fillOpacity: 0.6,
     stroke: "orange",
     title: (d) => `Name: ${d.personLabel}`,
    //  href: (d) => d.properties['Agency or agencies involved'],
     target: "_blank" 
   })
  ]
})